<template>
	<div>
		<el-button style="margin: 20px" @click="open">open</el-button>
		<el-button style="margin: 20px" @click="openDialog">open dialog</el-button>
	</div>
	<div id="appId"></div>
</template>

<script setup lang="ts">
import { pageDialog, dialog } from "@pkg";

type F = {
	form: {
		name: string;
		age: number;
		editor: string;
	};
};
interface AA {
	name: string;
	age: number;
	editor: string;
}
type T = {
	table: {
		name1: string;
		age1: number;
	};
};

function form(page: any) {
	const form = page.createForm("form", {});
	form.addFormItem({
		key: "name",
		value: "zhangsan",
		component: "Input",
		label: "名字",
	});
	form.addFormItem({
		key: "age",
		value: "12",
		component: "InputNumber",
		label: "年龄",
	});
	form.addFormItem({
		key: "editor",
		component: "Editor",
		label: "富文本",
		value: "123123",
	});
}
function table(page: any) {
	const table = page.createTable("table", {
		url: "/store/productList",
		method: 'POST',
		resultField: 'result',
		headerTyps: 'application/json;charset=UTF-8',

		filterSearchData() {
			return { id: 15651110747973 };
		},

	});

	table.addTableCol({
		key: "age1",
		name: "年龄",
	});

	table.addTableCol({
		key: "name1",
		name: "名字",
	});
}

const open = () => {
	pageDialog
		.initPage<F, T>(page => {
			// form(page);
			table(page)
		})
		.initButton<F, T>((btn, page) => {
			btn.addButton({
				name: "set",
				callback() {
					const table = page.getTable("table");
					console.log(table, "adasd");
				},
			});
			btn.addButton({
				name: "reset",
				callback() {
					const table = page.getTable("table");
					console.log(table, "adasd11");
				},
			});
		})
		.open({
			title: "page dialog",
		});
};

const openDialog = () => {
	dialog
		.initForm<F["form"]>(form => {
			form.addFormItem({
				key: 'editor',
				component: "Editor",
				label: "富文本",
				value: "<p> <img src='http://192.168.3.201:8888/file/download/KTmNSbzeTu2yhqfjyx8zXeALd6MeUaUL' /> </p>",
			});

			form.setType("preview");
		})
		.open({
			"title": "fuwnben",
		});
};
</script>

<style lang="scss" scoped></style>
